<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>demo01</title>
</head>
<body>
	<div style="">
		 <video id="myVideo" width="300" height="400" src="" style="border-radius: 60%;background-color: #000000;"></video>
	</div>

 <button id="snapScreen">截屏</button>
 <canvas id="myCanvas" width="300" height="400"></canvas>
 <script>
  var myVideo = document.getElementById('myVideo');
  navigator.mediaDevices.getUserMedia({
    video: true
  }).then(function (mediaStream) {
    myVideo.srcObject = mediaStream;
    myVideo.onloadedmetadata = function () {
      myVideo.controls = "controls";
      myVideo.play();
    }
  });
  var snapScreen = document.getElementById('snapScreen'),
      canvas = document.getElementById('myCanvas').getContext('2d');
  snapScreen.onclick = function () {
    canvas.drawImage(myVideo, 0, 0);
  }
 </script>
 <style type="text/css">
 	video::-webkit-media-controls-fullscreen-button {    
 	
 	display: none;
 	
 	}
 	
 	video::-webkit-media-controls-play-button {}
 	
 	video::-webkit-media-controls-timeline {}
 	
 	video::-webkit-media-controls-current-time-display{}
 	
 	video::-webkit-media-controls-time-remaining-display {}
 	
 	video::-webkit-media-controls-mute-button {}
 	
 	video::-webkit-media-controls-toggle-closed-captions-button {}
 	
 	video::-webkit-media-controls-volume-slider {}
 </style>
</body>
</html>